<template>
  <div>
    <div class="toplist">
      <p>
        <span>
          <van-icon name="arrow-left" style="margin-left:-50px" @click="iconp" />
        </span>

        <span>二手房</span>
        <span>发布</span>
      </p>
    </div>
    <div class="nav">
      <h3>基本信息</h3>
    </div>
    <div class="nav-p">
      <span>小区名称</span>
      <span style="color:#ccc">
        <input type="text" v-model="houseInfo.housingName" placeholder="请输入小区名" />
      </span>
    </div>
    <!-- <div class="nav-p">
      <span>所属区域</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请选择" v-model="houseInfo.area" />
      </span>
    </div> -->
   <div class="lo"> 
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="所属地区"
      placeholder="请选择所在地区"
      @click="showsd = true"
    />
    <van-popup v-model="showsd" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="showsd = false"
        @finish="onFinish"
        :field-names="fieldNames"
      />
    </van-popup>
</div>
    <div class="nav-p">
      <span>所在地区</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请输入详细地址" v-model="houseInfo.detailAddress" />
      </span>
    </div>
    <div class="nav">
      <h3>房屋信息</h3>
    </div>

    <div class="nav-p">
      <span>房屋户型</span>
       <span style="color:#ccc">
         <input type="text" placeholder="请选择户型"  v-model="houseInfo.housetype" />
     
     
  
      <van-action-sheet   v-model="show" :actions="actions8" @select="onSelect" />
      
       </span>
         <van-icon name="arrow"  @click="show = true" />
    </div>

    <div class="nav-p">
      <span>房屋面积</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请输入建筑面积" v-model="houseInfo.houseArea" />
       
      <van-action-sheet v-model="shows" :actions="actions1" @select="onSelec" />
      
      </span>
    
       <van-icon name="arrow"  @click="shows = true" />
    </div>
    <div class="nav-p">
      <span>售价</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请填写售价" v-model="houseInfo.sellingprice" />
        <span>万元</span>
      </span>
    </div>
    <div class="nav-p">
      <span>楼层</span>
      <input type="text" placeholder="请填写楼层" v-model="houseInfo.floor" />
      <span>
        低层
        <span style="margin-left:10px;color:#ccc">
          <van-icon name="arrow" />
        </span>
      </span>
    </div>
    <div class="nav-p">
      <span>楼层</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请填写总层数" v-model="houseInfo.allFloor" />
      </span>
      <span>层</span>
    </div>
    <div class="nav-p">
      <span>朝向</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请选择朝向 " v-model="houseInfo.orientation" />
       
      <van-action-sheet v-model="shows1" :actions="actions2" @select="onSelecte" />
        
      </span>
      <van-icon name="arrow"  @click="shows1 = true" />
    </div>
    <div class="nav-p">
      <span>装修</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请选择 " v-model="houseInfo.fitment" />
        
      <van-action-sheet v-model="shows2" :actions="actions3" @select="onSelectec" />
      
      </span>
       <van-icon name="arrow"  @click="shows2 = true" />
    </div>
    <div class="nav-p">
      <span>类型</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请选择" v-model="houseInfo.fitmentType" />
     
      <van-action-sheet v-model="shows3" :actions="actions4" @select="onSelectect" />
       
      </span>
        <van-icon name="arrow"  @click="shows3 = true" />
    </div>
    <div class="nav-n">
      <span>房屋配套</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请选择 " v-model="houseInfo.houseAssort" />
       
      <van-action-sheet v-model="shows4" :actions="actions5" @select="onSelectecte" />
      
      </span>
         <van-icon name="arrow"  @click="shows4= true" />
    </div>
    <div class="nav-p">
      <span>特色标签</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请选择 " v-model="houseInfo.Speciallabel" />
       
      <van-action-sheet v-model="shows5" :actions="actions6" @select="onSelectectexc" />
      
      </span>
         <van-icon name="arrow"  @click="shows5 = true" />
    </div>
    <div class="nav">
      <h3>更多信息</h3>
    </div>
    <div class="nav-p">
      <span>房源标题</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请输入" v-model="houseInfo.listingTitle" />
      </span>
    </div>
    <div class="nav-p">
      <span>联系人</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请输入联系人姓名" v-model="houseInfo.contacts" />
         
      <van-action-sheet v-model="shows6" :actions="actions7" @select="onSele" />
      </span>
         <van-icon name="arrow"  @click="shows6= true" />
    </div>
    <div class="nav-p">
      <span>手机号</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请输入手机号" v-model="houseInfo.phone" />
      </span>
    </div>
    <div class="nav-p">
      <span>有效期</span>
      <div>
        <input type="text" placeholder="七天" v-model="houseInfo.termValidity" />
        <span style="margin-left:10px;color:#ccc">
          
        </span>

      </div>
    </div>
    <div class="nav-p">
      <span>房源描述</span>
      <span style="color:#ccc">
        <input type="text" placeholder="请输入" v-model="houseInfo.listingDesc" />
      </span>
    </div>
    <div class="nav-c">
      <span>图片</span>
      <img src="http://unsplash.it/400/600/?@name.jpg" alt />
    </div>
    <button class="btn" @click="vb(houseInfo)">提交</button>
    
    
  </div>
</template>
<script>
import { add, getallCity } from "../api/user.js";
export default {
  data() {
    return {
      houseInfo: {
        housingName: "",
        area: "",
        detailAddress: "",
        housetype: "",
        houseArea: "",
        sellingprice: "",
        floor: "",
        allFloor: "",
        orientation: "",
        fitment: "",
        fitmentType: "",
        houseAssort: "",
        Speciallabel: "",
        img: "http://unsplash.it/400/600/?@name.jpg",
        listingTitle: "",
        contacts: "",
        phone: "",
        termValidity: "",
        listingDesc: "",
        classifyType: "",
        pv: 0, //点击量
        isShow: "0",
        classifyType: 2
      },
      show: false,
      actions8: [
        { name: "3室两厅2卫1厨" },
        { name: "2室1厅" },
        { name: "1室1厅" }
      ],
      shows: false,
      actions1: [{ name: "150㎡" }, { name: "100㎡" }, { name: "120㎡" }],
      shows1: false,
      actions2: [
        { name: "南" },
        { name: "东" },
        { name: "西" },
        { name: "北" },
        { name: "东北" },
        { name: "西北" },
        { name: "东南" },
        { name: "西南" }
      ],
      shows2: false,
      actions3: [
        { name: "精装" },
        { name: "毛坯" },
        { name: "豪装" },
        { name: "奢装" },
        { name: "筒装" }
      ],
      shows3: false,
      actions4: [
        { name: "叙利亚" },
        { name: "北欧" },
        { name: "中式" },
        { name: "美式" }
      ],
      shows4: false,
      actions5: [
        { name: "电视" },
        { name: "空调" },
        { name: "洗衣机" },
        { name: "热水器" },
        { name: "沙发" },
        { name: "阳台" },
        { name: "床" },
        { name: "衣柜" }
      ],
      shows5: false,
      actions6: [
        { name: "近地铁" },
        { name: "临近医院" },
        { name: "有商场" },
        { name: "学区房" }
      ],
      shows6: false,
      actions7: [
        { name: "张三" },
        { name: "李四" },
        { name: "王五" },
        { name: "赵六" },
        { name: "冯七" }
      ],
      options: [],
      value1: "",
      fieldValue: "",
      cascaderValue: "",
      showsd:false,
      fieldNames: {
        text: "name",
        value: "code",
        children: ""
      }
    };
  },
  created() {
    this.getCityList();
  },
  methods: {
    iconp() {
      this.$router.push("/kj");
    },
    vb(houseInfo) {
      add(this.houseInfo).then(res => {
        console.log(res);
        this.$router.push("/kj");
      });
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.houseInfo.housetype = item.name;
    },
    onSelec(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.shows = false;
      this.houseInfo.houseArea = item.name;
    },
    onSelecte(item) {
      this.shows1 = false;
      this.houseInfo.orientation = item.name;
    },
    onSelectec(item) {
      this.shows2 = false;
      this.houseInfo.fitment = item.name;
    },
    onSelectect(item) {
      this.shows3 = false;
      this.houseInfo.fitmentType = item.name;
    },
    onSelectecte(item) {
      this.shows4 = false;
      this.houseInfo.houseAssort = item.name;
    },
    onSelectectexc(item) {
      this.shows5 = false;
      this.houseInfo.Speciallabel = item.name;
    },
    onSele(item) {
      this.shows6 = false;
      this.houseInfo.contacts = item.name;
    },
    onSelectCity(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    getCityList() {
      getallCity().then(res => {
        this.setCityList(res.data);
      });
    },
    setCityList(arr) {
      let arrCity = [];
      // 把所有一级城市筛选出来
      arrCity = arr.filter(item => item.level === 1);
      console.log(arrCity, "11");
      // 通过一级城市的code 和二级城市的parentCode 作比较 如果相等 把所有二级城市拿到
      arrCity = arrCity.map(item => {
        return {
          ...item,
          children: arr.filter(val => val.parentCode === item.code)
        };
      });
      console.log(arrCity, "222");
      //遍历二级城市这个数组 把三级城市拿到
      arrCity = arrCity.map(item => {
        return {
          ...item,
          children: item.children.map(val => {
            return {
              ...val,
              children: arr.filter(v => v.parentCode === val.code)
            };
          })
        };
      });
      this.options = arrCity;
    },
    onFinish({ selectedOptions }) {
      this.showsd = false;
      this.fieldValue = selectedOptions.map(option => option.name).join("/");
    }
  }
};
</script>
<style scoped="scss">
.toplist p {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding-top: 10px;
}

.nav {
  width: 100%;
  height: 35px;
  background: gainsboro;
  display: flex;
  align-items: center;
}
.nav-p {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  padding-top: 10px;
  margin-top: 5px;

  border-bottom: 1px #ccc solid;
}
.nav-n {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  /* padding-top: 10px; */
  margin-top: 5px;

  border-bottom: 1px #ccc solid;
}
.btn {
  width: 100px;
  height: 50px;
  background: cornflowerblue;
}
input {
  border: none;
}
::-webkit-input-placeholder {
  padding-left: 10px;
  padding-top: -5px;
}

.lo{
  border:solid 1px #ccc;
}
input{
  height: 40px;
  line-height: 40px;
}
</style>